import { useState } from "react";
import { apiReqs } from "@/api";
import { useNavigate } from "react-router-dom";
import { Button, Input } from "antd";
import RandomTree from "@/components/randomTree";

import "./login.less";

function Login() {
  // 创建路由钩子
  const navigate = useNavigate();

  // 组件中自维护的实时数据
  const [account, setAccount] = useState("");
  const [password, setPassword] = useState("");

  // 登录
  const login = () => {
    apiReqs.signIn({
      data: {
        account,
        password,
      },
      success: (res: any) => {
        console.log(res);
        navigate("/home");
      },
    });
  };

  return (
    <div className="P-login flex flexJc-center flexAi-center wp-100 hp-100">
      <div className="flex flexAi-center">
        <RandomTree className={'relative left-90 bottom-65'}/>
        <div>
          <div className="ipt-con">
            <Input
              placeholder="账号"
              value={account}
              onChange={(e) => {
                setAccount(e.target.value);
              }}
            />
          </div>
          <div className="ipt-con textDir-center">
            <Input.Password
              placeholder="密码"
              value={password}
              onChange={(e) => {
                setPassword(e.target.value);
              }}
            />
          </div>
          <div className="ipt-con textDir-center">
            <Button type="primary" block={true} onClick={login}>
              登录
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;
